<script setup>
import { ref, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHpvPack, postHpvPrice, postReshpv } from '@/apis/apis.js'
import { showToast } from '@/utils/utils.js'
const name = ref('')
const id_card = ref('')
const phone = ref('')
const gender = ref('')
const params = ref(null)
const data = ref([])
const activeComboIndex = ref(-1)
const activeTimeIndex = ref(-1)
const combo_id = ref('')
const time_id = ref('')
const price = ref(0)
const born_date = ref('')
const combo = ref('')
const ino_time = ref('')
const handleChangeGender = ({ detail: { value } }) => {
  console.log(value)
  console.log(typeof value)
  gender.value = value === '0' ? '男' : '女'
}
const handleChangeCombo = (item, index) => {
  activeComboIndex.value = index
  combo_id.value = item.combo_id
  combo.value = item.combo
}
const handleChangeTime = (item, index) => {
  activeTimeIndex.value = index
  time_id.value = item.time_id
  ino_time.value = item.time
}
const handleChangeBorndate = ({ detail: { value } }) => {
  born_date.value = value
}
const handleSubmit = async () => {
  const data = {
    name: name.value,
    id_card: id_card.value,
    gender: gender.value,
    born_date: born_date.value,
    phone: phone.value,
    combo: combo.value,
    ino_time: ino_time.value,
    price: price.value,
    hpv_name: params.value.name
  }
  await postReshpv(data)
  showToast('预约成功')
  setTimeout(() => {
    uni.redirectTo({ url: '/pages/my-service/hpv-view/hpv-view' })
  }, 1000)
}
onLoad((option) => {
  params.value = JSON.parse(option.params)
  console.log(params.value)
})
onMounted(async () => {
  const res = await getHpvPack()
  data.value = res.data
})
watch([combo_id, time_id], async () => {
  if (combo_id.value !== '' && time_id.value !== '') {
    const { data } = await postHpvPrice({
      hpv_id: params.value._id,
      combo_id: combo_id.value,
      time_id: time_id.value
    })
    price.value = data[0].price
  }
})
</script>

<template>
  <view class="view">
    <view class="view-detail" v-if="params !== null">
      <view class="view-detail-left">
        <view class="view-detail-left-name">{{ params.name }}</view>
        <view class="view-detail-left-tags">
          <view class="view-detail-left-tag" v-for="(item, index) in params.describe" :key="index">{{ item }}</view>
        </view>
      </view>
      <view class="view-detail-right">￥{{ params.price[0] }}-￥{{ params.price[1] }}</view>
    </view>
    <view class="view-form">
      <view class="view-form-item">
        <view class="view-form-label">真实姓名</view>
        <input class="view-form-input" placeholder="请输入真实姓名" v-model.trim="name"  />
      </view>
      <view class="view-form-item">
        <view class="view-form-label">身份证</view>
        <input class="view-form-input" placeholder="请输入身份证" type="idcard" v-model.trim="id_card" />
      </view>
      <view class="view-form-item">
        <view class="view-form-label">性别</view>
        <picker mode="selector" :range="['男', '女']" @change="handleChangeGender">
          <view class="view-form-picker" v-if="gender === ''">
            <view class="view-form-picker-placeholder">请选择性别</view>
            <image class="view-form-picker-image" src="/static/images/more.svg" mode="aspectFit"></image>
          </view>
          <view class="view-form-picker" v-else>
            <view class="view-form-picker-placeholder">{{ gender }}</view>
          </view>
        </picker>
      </view>
      <view class="view-form-item">
        <view class="view-form-label">出生日期</view>
        <picker mode="date" @change="handleChangeBorndate">
          <view class="view-form-picker" v-if="born_date === ''">
            <view class="view-form-picker-placeholder">请选择出生日期</view>
            <image class="view-form-picker-image" src="/static/images/more.svg" mode="aspectFit"></image>
          </view>
          <view class="view-form-picker" v-else>
            <view class="view-form-picker-placeholder">{{ born_date }}</view>
          </view>
        </picker>
      </view>
      <view class="view-form-item">
        <view class="view-form-label">手机号</view>
        <input class="view-form-input" placeholder="请输入手机号" type="tel" v-model.trim="phone" />
      </view>
    </view>
    <view class="view-attrs" v-if="data.length > 0">
      <view class="view-attr">
        <view class="view-attr-title">{{ data[0].title }}</view>
        <scroll-view class="view-attr-content" scroll-x enable-flex>
          <view class="view-attr-item" :class="{ active: activeComboIndex === index }" v-for="(item, index) in data[0].name" :key="index" @click="handleChangeCombo(item, index)">{{ item.combo }}</view>
        </scroll-view>
        <view class="view-attr-title">{{ data[1].title }}</view>
        <scroll-view class="view-attr-content" scroll-x enable-flex>
          <view class="view-attr-item" :class="{ active: activeTimeIndex === index }" v-for="(item, index) in data[1].name" :key="index" @click="handleChangeTime(item, index)">{{ item.time }}</view>
        </scroll-view>
      </view>
    </view>
    <view class="view-footer">
      <view class="view-footer-left">合计：￥{{ price }}</view>
      <view class="view-footer-right" @click="handleSubmit">提交</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  position: relative;
  padding-bottom: calc(115rpx + env(safe-area-inset-bottom));
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-detail {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    .view-detail-left {
      .view-detail-left-name {
        margin-bottom: 20rpx;
      }
      .view-detail-left-tags {
        display: flex;
        align-items: center;
        .view-detail-left-tag {
          margin-right: 10rpx;
          background-color: #f8f8f8;
          font-size: 28rpx;
        }
      }
    }
    .view-detail-right {
      color: red;
    }
  }
  .view-form {
    margin-bottom: 20rpx;
    background-color: #fff;
    .view-form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 20rpx;
      padding: 40rpx 0;
      border-bottom: 1px solid #f8f8f8;
      .view-form-label {
        margin-right: 20rpx;
      }
      .view-form-input {
        flex: 1;
        text-align: end;
      }
      .view-form-picker {
        display: flex;
        align-items: center;
        .view-form-picker-placeholder {
          margin-right: 10rpx;
        }
        .view-form-picker-image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
  .view-attrs {
    padding: 20rpx;
    background-color: #fff;
    .view-attr {
      .view-attr-title {
        margin-bottom: 20rpx;
        font-weight: bold;
      }
      .view-attr-content {
        display: flex;
        white-space: nowrap;
        .view-attr-item {
          margin-right: 20rpx;
          padding: 20rpx 40rpx;
          height: fit-content;
          background-color: #f8f8f8;
          border-radius: 10rpx;
          &.active {
            background-color: #4176e1;
            color: #fff;
          }
        }
      }
    }
  }
  .view-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx env(safe-area-inset-bottom);
    width: 750rpx;
    background-color: #fff;
    .view-footer-left {
      color: red;
    }
    .view-footer-right {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160rpx;
      height: 75rpx;
      background-color: #4176e1;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
